<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
        <title>And search - simple-datatables</title>
        <!-- DataTable Styles -->
        <link rel="stylesheet" href="../dist/css/style.css">
        <!-- Demo Styles -->
        <link rel="stylesheet" href="../demo.css">
        <link rel="stylesheet" href="style.css">
        <style>

        </style>
    </head>
    <body>
        <header>
            <h1>
                <a href="../../">simple-datatables</a>
            </h1>
            <a href="../../documentation">Documentation</a>
            <a href="../">Demos</a>
        </header>

        <h2>Custom search method</h2>
        <p>
            This demo shows two different kinds of search methods. There is the default search and additionally a special kind of dropdown filter.
            Search is also applied differently for the column with the classes, which contains more complex html.
        </p>
        <p>Example: Search for "Luca", click on "Select classes" and deselect all except "Math" and finally move the "Minimal completion
            percentage" somewhere between 50-70%. You should now only see two entries as all filters are applied simultaneously.</p>

        <div class="multiselect">
            <div class="select-box">
                <select>
                    <option>Select Classes</option>
                </select>
                <div class="over-select"></div>
            </div>

            <div id="checkboxes" class="checkboxes">
                <label for="math">
                    <input type="checkbox" id="math" value="math" checked="checked"> Math
                </label>
                <label for="history">
                    <input type="checkbox" id="history" value="history" checked="checked"> History
                </label>
                <label for="english">
                    <input type="checkbox" id="english" value="english" checked="checked"> English
                </label>
                <label for="physics">
                    <input type="checkbox" id="physics" value="physics" checked="checked"> Physics
                </label>
                <label for="chemistry">
                    <input type="checkbox" id="chemistry" value="chemistry" checked="checked"> Chemistry
                </label>
                <label for="biology">
                    <input type="checkbox" id="biology" value="biology" checked="checked"> Biology
                </label>
                <label for="french">
                    <input type="checkbox" id="french" value="french" checked="checked"> French
                </label>
                <label for="german">
                    <input type="checkbox" id="german" value="german" checked="checked"> German
                </label>
            </div>
        </div>

        <div class="slider-container">
            <label for="percentage-slider">Minimal Completion Percentage: </label>
            <input type="range" id="percentage-slider" min="0" max="100" value="0" step="1">
            <span id="slider-value">0%</span>
        </div>

        <table id="demo-table">
            <thead>
                <tr>
                    <th data-type="string">Name</th>
                    <th data-type="html">Classes</th>
                    <th data-type="string">City</th>
                    <th data-type="date" data-format="YYYY/DD/MM">Start Date</th>
                    <th data-type="string">Completion</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Unity Pugh</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Curicó</td>
                    <td>2005/02/11</td>
                    <td>37%</td>
                </tr>
                <tr>
                    <td>Theodore Duran</td>
                    <td>
                        <span class="class german">German</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Dhanbad</td>
                    <td>1999/04/07</td>
                    <td>97%</td>
                </tr>
                <tr>
                    <td>Isla Walton</td>
                    <td>
                        <span class="class english">English</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>São Paulo</td>
                    <td>2002/09/22</td>
                    <td>82%</td>
                </tr>
                <tr>
                    <td>Oscar Lawrence</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class physics">Physics</span>
                    </td>
                    <td>Montpellier</td>
                    <td>2008/12/18</td>
                    <td>65%</td>
                </tr>
                <tr>
                    <td>Mia Andrews</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Osaka</td>
                    <td>2003/03/14</td>
                    <td>90%</td>
                </tr>
                <tr>
                    <td>Luca Baker</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Chicago</td>
                    <td>2010/07/30</td>
                    <td>58%</td>
                </tr>
                <tr>
                    <td>Amelia Hayes</td>
                    <td>
                        <span class="class french">French</span>
                        <span class="class biology">Biology</span>
                    </td>
                    <td>Stockholm</td>
                    <td>2011/06/25</td>
                    <td>75%</td>
                </tr>
                <tr>
                    <td>Noah White</td>
                    <td>
                        <span class="class physics">Physics</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Toronto</td>
                    <td>2009/10/08</td>
                    <td>44%</td>
                </tr>
                <tr>
                    <td>Sophia Clark</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class history">History</span>
                    </td>
                    <td>Sydney</td>
                    <td>2006/05/20</td>
                    <td>95%</td>
                </tr>
                <tr>
                    <td>Logan Roberts</td>
                    <td>
                        <span class="class math">Math</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Mumbai</td>
                    <td>2012/11/15</td>
                    <td>51%</td>
                </tr>
                <tr>
                    <td>Aria Lewis</td>
                    <td>
                        <span class="class french">French</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Bogotá</td>
                    <td>2004/04/01</td>
                    <td>67%</td>
                </tr>
                <tr>
                    <td>Henry Phillips</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class history">History</span>
                    </td>
                    <td>Shanghai</td>
                    <td>2007/03/19</td>
                    <td>89%</td>
                </tr>
                <tr>
                    <td>Ella Evans</td>
                    <td>
                        <span class="class physics">Physics</span>
                        <span class="class german">German</span>
                    </td>
                    <td>Lisbon</td>
                    <td>1998/12/29</td>
                    <td>72%</td>
                </tr>
                <tr>
                    <td>Jack Turner</td>
                    <td>
                        <span class="class english">English</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Mexico City</td>
                    <td>2013/01/10</td>
                    <td>59%</td>
                </tr>
                <tr>
                    <td>Emily Russell</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class french">French</span>
                    </td>
                    <td>Vienna</td>
                    <td>2000/08/16</td>
                    <td>93%</td>
                </tr>
                <tr>
                    <td>Lucas Griffin</td>
                    <td>
                        <span class="class math">Math</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Delhi</td>
                    <td>2001/05/30</td>
                    <td>47%</td>
                </tr>
                <tr>
                    <td>Lily Brooks</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class physics">Physics</span>
                    </td>
                    <td>Berlin</td>
                    <td>2010/09/03</td>
                    <td>76%</td>
                </tr>
                <tr>
                    <td>Benjamin Kelly</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class german">German</span>
                    </td>
                    <td>Warsaw</td>
                    <td>2002/10/22</td>
                    <td>64%</td>
                </tr>
                <tr>
                    <td>Grace Foster</td>
                    <td>
                        <span class="class english">English</span>
                        <span class="class biology">Biology</span>
                    </td>
                    <td>Johannesburg</td>
                    <td>2005/07/11</td>
                    <td>88%</td>
                </tr>
                <tr>
                    <td>James Perez</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class physics">Physics</span>
                    </td>
                    <td>Munich</td>
                    <td>1997/02/03</td>
                    <td>54%</td>
                </tr>
                <tr>
                    <td>Olivia Parker</td>
                    <td>
                        <span class="class math">Math</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Brisbane</td>
                    <td>2014/08/19</td>
                    <td>70%</td>
                </tr>
                <tr>
                    <td>Alexander Morris</td>
                    <td>
                        <span class="class french">French</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Karachi</td>
                    <td>2011/12/27</td>
                    <td>81%</td>
                </tr>
                <tr>
                    <td>Ava Reed</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class german">German</span>
                    </td>
                    <td>Lima</td>
                    <td>2009/06/02</td>
                    <td>48%</td>
                </tr>
                <tr>
                    <td>Ethan Cooper</td>
                    <td>
                        <span class="class physics">Physics</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Kyoto</td>
                    <td>2008/04/16</td>
                    <td>93%</td>
                </tr>
                <tr>
                    <td>Sophia Bell</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Madrid</td>
                    <td>2003/07/09</td>
                    <td>62%</td>
                </tr>
                <tr>
                    <td>Michael Nelson</td>
                    <td>
                        <span class="class french">French</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Cape Town</td>
                    <td>1999/05/13</td>
                    <td>85%</td>
                </tr>
                <tr>
                    <td>Emma Hughes</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Birmingham</td>
                    <td>2015/09/24</td>
                    <td>91%</td>
                </tr>
                <tr>
                    <td>Mason Wood</td>
                    <td>
                        <span class="class english">English</span>
                    </td>
                    <td>Amsterdam</td>
                    <td>2012/11/07</td>
                    <td>79%</td>
                </tr>
                <tr>
                    <td>Avery Rogers</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class history">History</span>
                        <span class="class french">French</span>
                    </td>
                    <td>Dallas</td>
                    <td>2004/03/15</td>
                    <td>45%</td>
                </tr>
                <tr>
                    <td>Lucas Bennett</td>
                    <td>
                        <span class="class math">Math</span>
                        <span class="class biology">Biology</span>
                    </td>
                    <td>Mexico City</td>
                    <td>2013/06/19</td>
                    <td>72%</td>
                </tr>
                <tr>
                    <td>Charlotte Cox</td>
                    <td>
                        <span class="class physics">Physics</span>
                    </td>
                    <td>Cairo</td>
                    <td>2010/10/04</td>
                    <td>68%</td>
                </tr>
                <tr>
                    <td>Daniel Russell</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Vancouver</td>
                    <td>2007/01/23</td>
                    <td>77%</td>
                </tr>
                <tr>
                    <td>Harper Brooks</td>
                    <td>
                        <span class="class french">French</span>
                    </td>
                    <td>Barcelona</td>
                    <td>2006/08/11</td>
                    <td>56%</td>
                </tr>
                <tr>
                    <td>Owen Price</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class german">German</span>
                        <span class="class physics">Physics</span>
                    </td>
                    <td>Santiago</td>
                    <td>2002/05/18</td>
                    <td>93%</td>
                </tr>
                <tr>
                    <td>Evelyn Morgan</td>
                    <td>
                        <span class="class english">English</span>
                    </td>
                    <td>Naples</td>
                    <td>2008/12/12</td>
                    <td>52%</td>
                </tr>
                <tr>
                    <td>Jacob Rivera</td>
                    <td>
                        <span class="class biology">Biology</span>
                    </td>
                    <td>Los Angeles</td>
                    <td>2011/03/21</td>
                    <td>87%</td>
                </tr>
                <tr>
                    <td>Lily Ward</td>
                    <td>
                        <span class="class math">Math</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Helsinki</td>
                    <td>2003/09/14</td>
                    <td>71%</td>
                </tr>
                <tr>
                    <td>Samuel Murphy</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class german">German</span>
                    </td>
                    <td>Auckland</td>
                    <td>2012/07/01</td>
                    <td>62%</td>
                </tr>
                <tr>
                    <td>Chloe Sanders</td>
                    <td>
                        <span class="class english">English</span>
                    </td>
                    <td>New York</td>
                    <td>1999/04/18</td>
                    <td>98%</td>
                </tr>
                <tr>
                    <td>Elijah Rogers</td>
                    <td>
                        <span class="class physics">Physics</span>
                        <span class="class french">French</span>
                    </td>
                    <td>Melbourne</td>
                    <td>2007/11/05</td>
                    <td>54%</td>
                </tr>
                <tr>
                    <td>Sofia Patterson</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class history">History</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Edinburgh</td>
                    <td>2013/10/26</td>
                    <td>64%</td>
                </tr>
                <tr>
                    <td>David Foster</td>
                    <td>
                        <span class="class english">English</span>
                    </td>
                    <td>Rome</td>
                    <td>2011/06/17</td>
                    <td>83%</td>
                </tr>
                <tr>
                    <td>Amelia Foster</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Toronto</td>
                    <td>2009/03/13</td>
                    <td>49%</td>
                </tr>
                <tr>
                    <td>Aiden Rogers</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Boston</td>
                    <td>2014/04/22</td>
                    <td>72%</td>
                </tr>
                <tr>
                    <td>Scarlett Price</td>
                    <td>
                        <span class="class math">Math</span>
                    </td>
                    <td>Florence</td>
                    <td>2006/11/09</td>
                    <td>81%</td>
                </tr>
                <tr>
                    <td>Joseph Campbell</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class history">History</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Tokyo</td>
                    <td>2010/02/28</td>
                    <td>60%</td>
                </tr>
                <tr>
                    <td>Mia Howard</td>
                    <td>
                        <span class="class french">French</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Brussels</td>
                    <td>2008/08/13</td>
                    <td>84%</td>
                </tr>
                <tr>
                    <td>Ryan Rivera</td>
                    <td>
                        <span class="class physics">Physics</span>
                    </td>
                    <td>Paris</td>
                    <td>2001/12/07</td>
                    <td>48%</td>
                </tr>
                <tr>
                    <td>Victoria Griffin</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class german">German</span>
                    </td>
                    <td>San Francisco</td>
                    <td>2005/06/02</td>
                    <td>75%</td>
                </tr>
                <tr>
                    <td>Benjamin Sanders</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class biology">Biology</span>
                    </td>
                    <td>Berlin</td>
                    <td>1997/10/14</td>
                    <td>66%</td>
                </tr>
                <tr>
                    <td>Leah Murphy</td>
                    <td>
                        <span class="class math">Math</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Seoul</td>
                    <td>2004/07/27</td>
                    <td>92%</td>
                </tr>
                <tr>
                    <td>Gabriel Bell</td>
                    <td>
                        <span class="class physics">Physics</span>
                    </td>
                    <td>Buenos Aires</td>
                    <td>2016/03/19</td>
                    <td>55%</td>
                </tr>
                <tr>
                    <td>Zoe Evans</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class french">French</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Shanghai</td>
                    <td>2000/01/30</td>
                    <td>90%</td>
                </tr>
                <tr>
                    <td>Jackson Reed</td>
                    <td>
                        <span class="class math">Math</span>
                        <span class="class history">History</span>
                    </td>
                    <td>Madrid</td>
                    <td>2015/09/11</td>
                    <td>79%</td>
                </tr>
                <tr>
                    <td>Elizabeth Parker</td>
                    <td>
                        <span class="class physics">Physics</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Lisbon</td>
                    <td>2007/05/09</td>
                    <td>85%</td>
                </tr>
                <tr>
                    <td>William Ward</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class history">History</span>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Prague</td>
                    <td>2003/06/01</td>
                    <td>58%</td>
                </tr>
                <tr>
                    <td>Sophie Hayes</td>
                    <td>
                        <span class="class french">French</span>
                        <span class="class english">English</span>
                        <span class="class physics">Physics</span>
                        <span class="class german">German</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Zurich</td>
                    <td>1998/04/15</td>
                    <td>67%</td>
                </tr>
                <tr>
                    <td>Liam Fisher</td>
                    <td>
                        <span class="class math">Math</span>
                    </td>
                    <td>Dubai</td>
                    <td>2009/11/30</td>
                    <td>93%</td>
                </tr>
                <tr>
                    <td>Madison Simmons</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class biology">Biology</span>
                        <span class="class french">French</span>
                    </td>
                    <td>Hong Kong</td>
                    <td>2010/01/18</td>
                    <td>61%</td>
                </tr>
                <tr>
                    <td>Jackson Moore</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class physics">Physics</span>
                    </td>
                    <td>Oslo</td>
                    <td>2014/07/05</td>
                    <td>73%</td>
                </tr>
                <tr>
                    <td>Aubrey Peterson</td>
                    <td>
                        <span class="class math">Math</span>
                        <span class="class english">English</span>
                        <span class="class biology">Biology</span>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class physics">Physics</span>
                    </td>
                    <td>Jakarta</td>
                    <td>2006/05/25</td>
                    <td>83%</td>
                </tr>
                <tr>
                    <td>Christopher Morgan</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class math">Math</span>
                        <span class="class german">German</span>
                    </td>
                    <td>Bucharest</td>
                    <td>2012/10/10</td>
                    <td>48%</td>
                </tr>
                <tr>
                    <td>Victoria Jenkins</td>
                    <td>
                        <span class="class english">English</span>
                        <span class="class french">French</span>
                    </td>
                    <td>Amsterdam</td>
                    <td>1997/03/21</td>
                    <td>86%</td>
                </tr>
                <tr>
                    <td>Logan Bryant</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Toronto</td>
                    <td>2002/09/17</td>
                    <td>59%</td>
                </tr>
                <tr>
                    <td>Stella Collins</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class biology">Biology</span>
                        <span class="class math">Math</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Munich</td>
                    <td>2013/06/22</td>
                    <td>74%</td>
                </tr>
                <tr>
                    <td>Luke Evans</td>
                    <td>
                        <span class="class french">French</span>
                        <span class="class german">German</span>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class biology">Biology</span>
                        <span class="class history">History</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Rio de Janeiro</td>
                    <td>2001/04/11</td>
                    <td>92%</td>
                </tr>
                <tr>
                    <td>Natalie Powell</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class math">Math</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Copenhagen</td>
                    <td>2005/08/06</td>
                    <td>68%</td>
                </tr>
                <tr>
                    <td>Isaac Sanders</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class french">French</span>
                    </td>
                    <td>New Delhi</td>
                    <td>2008/09/14</td>
                    <td>45%</td>
                </tr>
                <tr>
                    <td>Penelope Bailey</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Vienna</td>
                    <td>2003/11/18</td>
                    <td>81%</td>
                </tr>
                <tr>
                    <td>John Hughes</td>
                    <td>
                        <span class="class math">Math</span>
                    </td>
                    <td>Athens</td>
                    <td>2011/12/24</td>
                    <td>64%</td>
                </tr>
                <tr>
                    <td>Ava Miller</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class physics">Physics</span>
                    </td>
                    <td>Dubai</td>
                    <td>2014/05/09</td>
                    <td>79%</td>
                </tr>
                <tr>
                    <td>Lucas Gray</td>
                    <td>
                        <span class="class german">German</span>
                        <span class="class math">Math</span>
                        <span class="class history">History</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Singapore</td>
                    <td>1999/01/30</td>
                    <td>72%</td>
                </tr>
                <tr>
                    <td>Claire Young</td>
                    <td>
                        <span class="class physics">Physics</span>
                        <span class="class french">French</span>
                        <span class="class history">History</span>
                    </td>
                    <td>Hanoi</td>
                    <td>2007/10/03</td>
                    <td>57%</td>
                </tr>
                <tr>
                    <td>James Mitchell</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class biology">Biology</span>
                        <span class="class math">Math</span>
                        <span class="class physics">Physics</span>
                        <span class="class german">German</span>
                    </td>
                    <td>Bangkok</td>
                    <td>2015/02/18</td>
                    <td>88%</td>
                </tr>
                <tr>
                    <td>Grace Wright</td>
                    <td>
                        <span class="class history">History</span>
                    </td>
                    <td>Beijing</td>
                    <td>2010/03/25</td>
                    <td>67%</td>
                </tr>
                <tr>
                    <td>Owen Lopez</td>
                    <td>
                        <span class="class math">Math</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Kuala Lumpur</td>
                    <td>2008/12/16</td>
                    <td>49%</td>
                </tr>
                <tr>
                    <td>Mia Phillips</td>
                    <td>
                        <span class="class french">French</span>
                        <span class="class german">German</span>
                        <span class="class biology">Biology</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Los Angeles</td>
                    <td>2006/07/29</td>
                    <td>84%</td>
                </tr>
                <tr>
                    <td>Henry Adams</td>
                    <td>
                        <span class="class physics">Physics</span>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class history">History</span>
                    </td>
                    <td>Sydney</td>
                    <td>2013/04/01</td>
                    <td>94%</td>
                </tr>
                <tr>
                    <td>Wim Glucksman</td>
                    <td>
                        <span class="class french">French</span>
                        <span class="class english">English</span>
                        <span class="class history">History</span>
                    </td>
                    <td>Oslo</td>
                    <td>2009/10/09</td>
                    <td>75%</td>
                </tr>
                <tr>
                    <td>Amelia Carter</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class english">English</span>
                        <span class="class history">History</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Vienna</td>
                    <td>2011/09/12</td>
                    <td>77%</td>
                </tr>
                <tr>
                    <td>Oliver Foster</td>
                    <td>
                        <span class="class physics">Physics</span>
                        <span class="class math">Math</span>
                        <span class="class german">German</span>
                        <span class="class french">French</span>
                        <span class="class biology">Biology</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Frankfurt</td>
                    <td>2004/11/30</td>
                    <td>91%</td>
                </tr>
                <tr>
                    <td>Hannah Kelly</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class math">Math</span>
                        <span class="class physics">Physics</span>
                    </td>
                    <td>Stockholm</td>
                    <td>2016/05/22</td>
                    <td>64%</td>
                </tr>
                <tr>
                    <td>Wyatt Flores</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Montreal</td>
                    <td>2010/04/11</td>
                    <td>53%</td>
                </tr>
                <tr>
                    <td>Lillian Reed</td>
                    <td>
                        <span class="class biology">Biology</span>
                        <span class="class french">French</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Chicago</td>
                    <td>2012/06/14</td>
                    <td>70%</td>
                </tr>
                <tr>
                    <td>Caleb Jenkins</td>
                    <td>
                        <span class="class german">German</span>
                        <span class="class history">History</span>
                    </td>
                    <td>Mumbai</td>
                    <td>2005/07/29</td>
                    <td>87%</td>
                </tr>
                <tr>
                    <td>Abigail Rivera</td>
                    <td>
                        <span class="class math">Math</span>
                        <span class="class english">English</span>
                        <span class="class biology">Biology</span>
                        <span class="class history">History</span>
                    </td>
                    <td>Madrid</td>
                    <td>2011/01/20</td>
                    <td>72%</td>
                </tr>
                <tr>
                    <td>Jack Russell</td>
                    <td>
                        <span class="class french">French</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Barcelona</td>
                    <td>2007/09/03</td>
                    <td>60%</td>
                </tr>
                <tr>
                    <td>Aria Morris</td>
                    <td>
                        <span class="class physics">Physics</span>
                        <span class="class biology">Biology</span>
                        <span class="class math">Math</span>
                        <span class="class german">German</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Seoul</td>
                    <td>2014/12/11</td>
                    <td>95%</td>
                </tr>
                <tr>
                    <td>Hunter Murphy</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class french">French</span>
                    </td>
                    <td>Cape Town</td>
                    <td>1999/05/06</td>
                    <td>47%</td>
                </tr>
                <tr>
                    <td>Ellie Powell</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class math">Math</span>
                        <span class="class biology">Biology</span>
                        <span class="class physics">Physics</span>
                        <span class="class history">History</span>
                    </td>
                    <td>Bangkok</td>
                    <td>2010/09/16</td>
                    <td>88%</td>
                </tr>
                <tr>
                    <td>Julian Hall</td>
                    <td>
                        <span class="class english">English</span>
                        <span class="class german">German</span>
                    </td>
                    <td>Melbourne</td>
                    <td>2006/03/09</td>
                    <td>52%</td>
                </tr>
                <tr>
                    <td>Camila Torres</td>
                    <td>
                        <span class="class french">French</span>
                        <span class="class biology">Biology</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>Mexico City</td>
                    <td>2017/06/14</td>
                    <td>65%</td>
                </tr>
                <tr>
                    <td>Levi Lee</td>
                    <td>
                        <span class="class history">History</span>
                    </td>
                    <td>Buenos Aires</td>
                    <td>2011/10/27</td>
                    <td>40%</td>
                </tr>
                <tr>
                    <td>Sadie Baker</td>
                    <td>
                        <span class="class math">Math</span>
                        <span class="class english">English</span>
                        <span class="class biology">Biology</span>
                        <span class="class chemistry">Chemistry</span>
                    </td>
                    <td>London</td>
                    <td>2014/02/03</td>
                    <td>82%</td>
                </tr>
                <tr>
                    <td>Lincoln Gonzalez</td>
                    <td>
                        <span class="class physics">Physics</span>
                        <span class="class math">Math</span>
                        <span class="class history">History</span>
                    </td>
                    <td>San Diego</td>
                    <td>2005/12/08</td>
                    <td>74%</td>
                </tr>
                <tr>
                    <td>Zoe Perez</td>
                    <td>
                        <span class="class german">German</span>
                        <span class="class french">French</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Brussels</td>
                    <td>2009/04/16</td>
                    <td>56%</td>
                </tr>
                <tr>
                    <td>Isaiah Gray</td>
                    <td>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class english">English</span>
                        <span class="class biology">Biology</span>
                        <span class="class french">French</span>
                        <span class="class physics">Physics</span>
                    </td>
                    <td>Tokyo</td>
                    <td>2000/07/19</td>
                    <td>93%</td>
                </tr>
                <tr>
                    <td>Gabriella Ramirez</td>
                    <td>
                        <span class="class history">History</span>
                        <span class="class math">Math</span>
                    </td>
                    <td>Auckland</td>
                    <td>2002/01/14</td>
                    <td>63%</td>
                </tr>
                <tr>
                    <td>Charles Long</td>
                    <td>
                        <span class="class english">English</span>
                        <span class="class biology">Biology</span>
                        <span class="class french">French</span>
                    </td>
                    <td>Moscow</td>
                    <td>1997/10/24</td>
                    <td>59%</td>
                </tr>
                <tr>
                    <td>Violet Cooper</td>
                    <td>
                        <span class="class physics">Physics</span>
                        <span class="class chemistry">Chemistry</span>
                        <span class="class math">Math</span>
                        <span class="class english">English</span>
                    </td>
                    <td>Kuala Lumpur</td>
                    <td>2004/02/05</td>
                    <td>80%</td>
                </tr>
            </tbody>
        </table>


        <script type="module" src="script.js"></script>
    </body>
</html>
